<template>
  <div class="teacherPersonInfo">
    <el-upload
      class="avatar-uploader"
      v-loading.fullscreen.lock="fullscreenLoading"
      :action="this.$until.url+'/baseInfoCommon/uploadPhoto'"
      name="photo"
      :on-progress="uploading"
      :show-file-list="false"
      :on-success="handleAvatarScucess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!---->
    <el-form :model="teacherForm" :rules="teacherInfoRules" ref="teacherForm" label-width="100px" class="info-form fixed-form">
      <el-form-item label="编号" prop="teacherId">
        <el-input v-model="teacherForm.teacherId" placeholder="请输入编号"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="teacherName">
        <el-input v-model="teacherForm.teacherName" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="teacherSex">
        <el-radio class="radio" v-model="teacherForm.teacherSex" label="男">男</el-radio>
        <el-radio class="radio" v-model="teacherForm.teacherSex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item prop="teacherBirth" label="出生日期">
        <el-date-picker
          @change="teacherBirthToString"
          type="date"
          placeholder="选择日期"
          v-model="teacherForm.teacherBirth"
          style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="职称" prop="positionalTitle">
        <el-select v-model="teacherForm.positionalTitle" placeholder="请选择职称" class="full-line">
          <el-option
            v-for="item in positionalTitleChoose"
            :label="item.positionalLabel"
            :value="item.positionalValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职务" prop="teacherPosition">
        <el-select v-model="teacherForm.teacherPosition" placeholder="请选择职务" class="full-line">
          <el-option
            v-for="item in teacherPositionChoose"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="teacherTel">
        <el-input v-model="teacherForm.teacherTel" placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <!-- 查询出来的 -->
      <el-form-item label="所属学院" prop="college">
        <el-select
          filterable
          remote
          clearable
          v-model="teacherForm.collegeId"
          placeholder="请选择所属专业"
          class="full-line">
          <el-option
            v-for="item in collegeChoose"
            :label="item.label"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属专业" prop="majorId">
        <el-select
          filterable
          remote
          clearable
          v-model="teacherForm.majorId"
          placeholder="请选择所属专业"
          class="full-line">
          <el-option
            v-for="item in majorChoose"
            :label="item.majorName"
            :value="item.majorID">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所学专业" prop="graduateMajor">
        <el-select
          filterable
          remote
          clearable
          v-model="teacherForm.graduateMajor"
          placeholder="请选择所学专业"
          class="full-line">
          <el-option
            v-for="item in majorChoose"
            :label="item.majorName"
            :value="item.majorName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学历" prop="education">
        <el-select v-model="teacherForm.education" placeholder="请选择学历" class="full-line">
          <el-option label="大学本科" value="大学本科"></el-option>
          <el-option label="硕士研究生" value="硕士研究生"></el-option>
          <el-option label="博士研究生" value="硕士研究生"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学位" prop="degree">
        <el-select v-model="teacherForm.degree" placeholder="请选择学位" class="full-line">
          <el-option
            v-for="item in degreeChoose"
            :label="item.degreeLabel"
            :value="item.degreeValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="毕业学校"  placeholder="请输入毕业院校" prop="graduateSchool">
        <el-input v-model="teacherForm.graduateSchool"></el-input>
      </el-form-item>
      <el-form-item prop="joinSchoolTime" label="入校时间">
        <el-date-picker
          @change="joinSchoolToString"
          type="date"
          placeholder="选择日期"
          v-model="teacherForm.joinSchoolTime"
          style="width: 100%;">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('teacherForm')">立即创建</el-button>
        <el-button @click="resetForm('teacherForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
  .avatarUpload {
    margin-bottom: 10px;
    background: #EFF2F7;
  }

  .avatar-info-box {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #EEE;
  }

  .avatar-info-pic {
    height: 150px;
    width: 150px;
    border: 1px solid #CCC;
    border-radius: 50%;
    /*
    background: url(./avatarBg.jpg) no-repeat;
    */
  }

  .avatar-uploader {
    text-align: center;
    margin: 0px auto 30px;
    background: #EFF2F7;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: white;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-icon-plus:before {
    position: absolute;
    top: 70px;
    left: 75px;
  }

  .info-form {
    width: 80%;
    margin: 0 auto 30px;
    padding: 0 30px;
  }
</style>
<script>
  import AvatarUpload from '../fileUpload/avatarUpload'

  export default{
    name: 'teacherPersonInfo',
    data(){
      return {
        //avatar
        fullscreenLoading: false,
        dialogVisible: false,
        imageUrl: '',
        // form choose data
        positionalTitleChoose: [
          {
            positionalLabel: '助教',
            positionalValue: '助教'
          },
          {
            positionalLabel: '讲师',
            positionalValue: '讲师'
          },
          {
            positionalLabel: '副教授',
            positionalValue: '副教授'
          },
          {
            positionalLabel: '教授',
            positionalValue: '教授'
          }
        ],
        teacherPositionChoose: [
          {
            label: '教师',
            value: '教师'
          },
          {
            label: '班主任',
            value: '班主任'
          },
          {
            label: '教研室主任',
            value: '教研室主任'
          },
          {
            label: '教学院长',
            value: '教学院长'
          }
        ],
        degreeChoose: [
          {
            degreeLabel: '学士',
            degreeValue: '学士'
          },
          {
            degreeLabel: '硕士',
            degreeValue: '硕士'
          },
          {
            degreeLabel: '博士',
            degreeValue: '博士'
          }
        ],
        majorChoose: [],
       collegeChoose: [],
        //
        teacherForm: {
          teacherId: '',
          teacherName: '',
          teacherSex: '',
          teacherBirth: '',
          positionalTitle: '',
          teacherTel: '',
          collegeId:'',
          majorId: '',
          graduateMajor: '',
          education: '',
          degree: '',
          graduateSchool: '',
          joinSchoolTime: '',
          teacherPosition: '',
          //头像上传返回
          teacherPhoto: ''
        },
        teacherInfoRules: {
          teacherId: [
            {required: true, message: '请输入教师编号', trigger: 'blur'},
          ],
          teacherName: [
            {required: true, message: '请输入教师名称', trigger: 'blur'},
          ],
          teacherSex: [
            {required: true, message: '请选择性别', trigger: 'blur'},
          ],
          teacherBirth: [
            {required: true, message: '请选择出生日期', trigger: 'blur'},
          ],
          positionalTitle: [
            {required: true, message: '请输入职称', trigger: 'blur'},
          ],
          teacherTel: [
            {required: true, message: '请输入联系方式', trigger: 'blur'},
          ],
          college:[
            {required: false, message: '请输入所属学院', trigger: 'blur'},
          ],
          Major: [
            {required: true, message: '请输入所属专业', trigger: 'blur'},
          ],
          graduateMajor: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
          ],
          education: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
          ],
          degree: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
          ],
          graduateSchool: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
          ],
          joinSchoolTime: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
          ],
          teacherPosition: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
          ]
        }
      }
    },
    components: {
      AvatarUpload
    },
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      })
    },
    methods: {
      init(){
        this.getMajorInfo()
        this. getCollegeInfo()
      },
      getMajorInfo: function () {
        this.$http.get(this.$until.url + '/baseInfoCommon/initData').then(response => {
          this.majorChoose = response.body.majorAndId
        }, response => {
          console.log('文件获取失败');
        });
      },
      getCollegeInfo: function () {
        this.$http.get(this.$until.url + '/baseInfoCommon/getXy').then(response => {
          this.collegeChoose = response.body.xylist
          //console.log(this.collegeChoose)
        }, response => {
          console.log('文件获取失败');
        });
      },
      // to string
      //birth to string
      teacherBirthToString(val){
        this.teacherForm.teacherBirth = val;
      },
      joinSchoolToString(val){
        this.teacherForm.joinSchoolTime = val;
      },
      // teacher person info form submit
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.teacherForm.joinSchoolTime);
            //
            this.$http.post(this.$until.url + '/teacherBaseInfo/addTeacher', this.teacherForm, {emulateJSON: true}).then(response => {
              //success
              this.$message({
                message: response.body.message,
                type: 'success'
              });
              this.$router.replace({path: '/TeacherBaseInfo'});
            }, response => {
              console.log('文件获取失败');
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //reset form
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //avatar upload module
      handleAvatarScucess(res, file) {
        this.fullscreenLoading = false;
        //返回了个url
        //url
        this.teacherForm.teacherPhoto = res.picturePath;
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //upload
      uploading: function () {
        this.fullscreenLoading = false;
      }
    }
  }
</script>
